<script setup>
import { ref, watchEffect } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const defaultActive = ref('1')
const routeMap = {
  '/content/carousel': '1',
  '/content/zone': '2',
  '/content/brand': '3',
  '/content/ranking': '4',
}
watchEffect(() => {
  const matchedIndex = routeMap[route.path]
  if (matchedIndex) {
    defaultActive.value = matchedIndex
  }
})
</script>

<template>
  <el-container class="content-management">
    <el-aside width="100px">
      <el-menu :default-active="defaultActive" :router="true">
        <el-menu-item index="1" route="/content/carousel">轮播图</el-menu-item>
        <el-menu-item index="2" route="/content/zone">专区管理</el-menu-item>
        <el-menu-item index="3" route="/content/brand">品牌管理</el-menu-item>
        <el-menu-item index="4" route="/content/ranking">热销榜单</el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
      <router-view />
    </el-main>
  </el-container>
</template>

<style lang="scss" scoped>
.content-management {
  .el-aside {
    height: 100%;
    background-color: #ffffff;
  }

  .el-main {
    background-color: #f0f2f5;
    width: 100%;
  }
}
</style>
